<template>
  <div>
    <div>
      <Row class="header" type="flex" justify="start">
        <Col span="10"></Col>
        <Col span="8">
          <Icon class="icon" type="ios-podium-outline"/>
          <span class="title">受理趋势图</span>
        </Col>
      </Row>
      <br>
      <div id="staffAcceptance" :style="{ width:'1000px', height:'500px'}"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { getPersonWorkList } from '@/api/eventlist'
export default {
  name: 'StaffAcceptanceEchart',
  data () {
    return {
      chartData: {}
    }
  },
  props: {},
  mounted () {
  },
  methods: {
    chart (data) {
      this.chartData = data
      let datenamea = []
      let numa = []
      let numb = []
      let numc = []
      let numd = []
      let nume = []
      let maxa = 0
      let maxb = 100
      data.forEach(element => {
        datenamea.push(element.datenamea)
        if (element.numb > 0) {
          element.numd = ((element.numa - element.numb) / element.numb).toFixed(2)
        } else {
          element.numd = '100'
        }
        if (element.numc > 0) {
          element.nume = ((element.numa - element.numc) / element.numc).toFixed(2)
        } else {
          element.nume = '100'
        }
        numa.push(element.numa)
        numb.push(element.numb)
        numc.push(element.numc)
        numd.push(element.numd)
        nume.push(element.nume)
        if (element.numa > maxa) {
          maxa = element.numa
        }
        if (element.numb > maxa) {
          maxa = element.numb
        }
        if (element.numc > maxa) {
          maxa = element.numc
        }
        if (element.numd > maxb) {
          maxb = element.numd
        }
        if (element.nume > maxb) {
          maxb = element.nume
        }
      })
      console.log(maxa, 'maxa-----', maxb, 'maxb----')
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ['line', 'bar'] },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['受理量', '同比受理量', '环比受理量', '同比增长百分比', '环比增长百分比']
        },
        xAxis: [
          {
            type: 'category',
            data: datenamea,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '受理量',
            // min: 0,
            // max: maxa,
            axisLabel: {
              formatter: '{value} 件'
            }
          },
          {
            type: 'value',
            name: '百分比',
            // min: 0,
            // max: maxb,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '受理量',
            type: 'bar',
            data: numa
          },
          {
            name: '同比受理量',
            type: 'bar',
            data: numb
          },
          {
            name: '环比受理量',
            type: 'bar',
            data: numc
          },
          {
            name: '同比增长百分比',
            type: 'line',
            yAxisIndex: 1,
            data: numd
          },
          {
            name: '环比增长百分比',
            type: 'line',
            yAxisIndex: 1,
            data: nume
          }
        ]
      }
      let myChart = echarts.init(document.getElementById('staffAcceptance'))
      myChart.setOption(option)
    },
    init () {
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
